<template>
  <div class="point">
    <card :_Title="$t('point.my_point')"/>
    <div class="point-content">
      <span>{{$t('point.remainder')}}<span>{{ pointObj.point || 0 }}</span></span>
      <span>{{$t('point.cumulative')}}<span>{{ pointObj.totalPoint || 0 }}</span></span>
    </div>
    <h3>{{$t('point.logs')}}</h3>
    <Table :columns="logColumns" :data="logData.records" :no-data-text="$t('message.no_data')">
      <template slot-scope="{ row }" slot="point">
        <div :style="{color:row.pointType === 'INCREASE' ? 'green' : 'red'}">
          <span v-if="row.pointType === 'INCREASE'">+</span>{{ row.variablePoint }}
        </div>
      </template>
    </Table>
    <!-- 分頁 -->
    <Page
      style="float:right;margin-top:10px"
      :current="params.pageNumber"
      :total="logData.total"
      :page-size="params.pageSize"
      @on-change="changePage"
      @on-page-size-change="changePageSize"
      :page-size-opts="[10, 20, 50]"
      size="small"
      show-total
      show-elevator
    ></Page>
  </div>
</template>
<script>
import {memberPoint, memberPointHistory} from '@/api/member.js'
import i18n from "@/lang";
export default {
  i18n,
  name: 'Point',
  data () {
    return {
      logData: {}, // 積分日誌
      pointObj: {}, // 積分明細
      loading: false, // 請求接口加载框
      params: { // 積分列表請求參數
        pageNumber: 1,
        pageSize: 10
      },
      // logColumns: [ // table展示數据
      //   {
      //     title: '日誌内容',
      //     key: 'content',
      //     align: 'center'
      //   },
      //   {
      //     title: '時間',
      //     key: 'createTime',
      //     align: 'center'
      //   },
      //   {
      //     title: '積分明細',
      //     slot: 'point',
      //     align: 'center'
      //   }
      // ]
    }
  },
  computed:{
    logColumns(){
      return[
        {
          title: this.$t('point.log_content'),
          key: 'content',
          align: 'center'
        },
        {
          title: this.$t('point.time'),
          key: 'createTime',
          align: 'center'
        },
        {
          title: this.$t('point.detail'),
          slot: 'point',
          align: 'center'
        }
      ]
    }
  },
  mounted () {
    this.getHistory()
    this.getPoint()
  },
  methods: {
    getHistory () { // 获取積分历史
      memberPointHistory(this.params).then(res => {
        this.logData = res.result;
      })
    },
    getPoint () { // 获取積分詳情
      memberPoint().then(res => {
        if (res.success) this.pointObj = res.result
      })
    },
    changePage (val) { // 修改頁碼
      this.params.pageNumber = val
      this.getHistory()
    },
    changePageSize (val) { // 修改頁數
      this.params.pageSize = val
      this.params.pageNumber = 1
      this.getHistory()
    }
  }
}
</script>
<style lang="scss" scoped>
h3 {
  font-size: 16px;
  margin: 20px 10px;
}

.point-content {
  text-align: center;
  margin-bottom: 30px;

  > span {
    color: #999;
    margin-right: 100px;

    span {
      color: $theme_color;
      font-size: 24px;
    }
  }
}
</style>
